<template>
<q-dialog
  v-model="show"
  persistent
  :maximized="true"
  transition-show="slide-up"
  transition-hide="slide-down"
  class="code-edit">
  <div class="bg-white">
    <div class="code-edit-header text-center bg-primary text-white">
      {{name}}
      <q-btn dense flat icon="iconfont icontubiao-89" v-close-popup class="fr right-btn">
        <q-tooltip>关闭</q-tooltip>
      </q-btn>
      <q-btn v-if="state!=='look'" dense flat icon="iconfont icontubiao-102" class="fr right-btn" @click="save">
        <q-tooltip>保存</q-tooltip>
      </q-btn>
    </div>
    <textarea ref="eidtContent"></textarea>
  </div>
</q-dialog>
</template>

<script>
import _CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/mdn-like.css'
import 'codemirror/addon/merge/merge.css'
import 'codemirror/addon/merge/merge.js'
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/r/r.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/swift/swift.js'
import 'codemirror/mode/vue/vue.js'

export default {
  name: 'code-edit',
  props: {
    name: { // 文件名称
      type: String,
      default: ''
    },
    value: { // 外部传入的内容
      type: String,
      default: ''
    },
    language: { // 外部传入的语法类型
      type: String,
      default: null
    },
    decode: { // 文件编码
      type: String
    },
    path: { // 文件路径
      type: String
    },
    // look or edit
    state: {
      type: String,
      default: 'edit'
    }
  },
  data () {
    return {
      show: false, // 弹框的显示与隐藏
      code: '', // 内部真实的内容
      mode: 'cncMode', // 默认的语法类型
      coder: null, // 编辑器实例
      // 默认配置
      options: {
        tabSize: 2, // 缩进格式
        theme: 'mdn-like', // 主题
        lineNumbers: true, // 显示行号
        line: true,
        lineWrapping: true, // 代码折叠
        matchBrackets: true, // 括号匹配
        readOnly: this.state === 'look'
      }
    }
  },
  methods: {
    showDialog () {
      this.show = true
      this.$nextTick(() => {
        this.init()
      })
    },
    hideDialog () {
      this.show = false
    },
    // 初始化
    init () {
      // 初始化编辑器实例
      this.coder = _CodeMirror.fromTextArea(this.$refs.eidtContent, this.options)
      // 编辑器赋值
      this.coder.setValue(this.value)
      this.code = this.value

      // 支持双向绑定
      this.coder.on('change', (coder) => {
        this.code = coder.getValue()
        if (this.$emit) {
          this.$emit('input', this.code)
        }
      })

      // 尝试从父容器获取语法类型
      if (this.language) {
        this.mode = this.language
      }
    },
    // 保存
    save () {
      let code = this.code.trim()
      this.$emit('save', this.path, code)
    }
  }
}
</script>

<style lang="stylus">
.code-edit-header{
  height 40px
  line-height 40px
  font-size 18px
  padding-right 5px
  .right-btn{
    margin-top 5px
    margin-right 5px
  }
}
.CodeMirror{
  height calc(100% - 40px)
}
.fullscreen{
  z-index 6000 !important
}
</style>
